iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
0

》一開始基本的事前準備為下列三項,可依照個人喜好決定
瀏覽器:Google Chrome
開發工具:VS Code
Web Server:VS Code 上的 Live Server,或者 Google 擴充程式 Web Server for Chrome

》資料夾結構如下,可依照個人喜好決定
assets:放置素材的資料夾
index.html:練習的 html 檔案

》HTML 基本檔案內容

<!DOCTYPE html>
<html lang="en">
  <head>
      // style 的部分, 可以先把 body 的 預設 margin 去掉
      // 通常我的話,直接用「normalize css」
      <style> body {  margin: 0; } </style>
  </head>
  <body>
      <script src=“//cdn.jsdelivr.net/npm/phaser@3.14.0/dist/phaser.min.js"></script>
      <script>
        // 等等我們要練習的區塊
        (function(){
            .....
        })()
      </script>
  </body>
</html>

》Javascript 內容
創建場景

let scene = new Phaser.Scene(‘Game’)

基本配置

let config = {
    type: Phaser.AUTO,	// 會使用 WebGL 或 Canvas API,AUTO 是讓 Phaser 決定
    width: 640,
    height: 320,
    scene			// 等同於 scene: scene
}

創建遊戲

let game = new Phaser.Game(config)

》結論
我們完成了一開始基本的設定,可以開網頁來看看(需模擬 Server 環境打開),目前應該會是 640 * 320 的黑色區塊。


今天就先到這裡,我們明天見。


上一篇
Day 1:前言
下一篇
Day 3:生命週期
系列文
Phaser 幫我撐個 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言